<template>
  <div class="jifen-header-panel">
    <div class="jifen-header-panel__top">
      <div class="jifen-header-panel__top-wrapped">
        <div class="jifen-header-panel__top-count">
          <div className="num">{{ points }}</div>
          <div className="label">可用积分</div>
        </div>

        <image src="@/assets/jifen/corn.png" className="corn" />
      </div>
    </div>
    <div class="jifen-header-panel__bottom">
      <div className="jifen-header-panel__bottom-wrapped">
        <div className="tab-item" @tap="onNavigateMall">
          <image
            src="@/assets/jifen/icon_jifenshangcheng.png"
            className="tab-item__icon"
          />
          <span>积分商城</span>
        </div>

        <div className="tab-item" @tap="onNavigateDetail">
          <image
            src="@/assets/jifen/icon_jifenmingxi.png"
            className="tab-item__icon"
          />
          <span>积分明细</span>
        </div>

        <div className="tab-item" @tap="onNavigateExchange">
          <image
            src="@/assets/jifen/icon_duihuanjilu.png"
            className="tab-item__icon"
          />
          <span>兑换记录</span>
        </div>

        <div className="tab-item" @tap="onNavigateRank">
          <image
            src="@/assets/jifen/icon_jifenpaihang.png"
            className="tab-item__icon"
          />
          <span>积分排行</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";

defineOptions({
  name: "header-panel",
});

withDefaults(
  defineProps<{
    points: number;
  }>(),
  {
    points: 0,
  }
);

const onNavigateMall = () => {
  Taro.navigateTo({
    url: "/packageA/pages/mall/index",
  });
};

const onNavigateDetail = () => {
  Taro.navigateTo({
    url: `/packageA/pages/detail-and-record/index?type=${1}`,
  });
};

const onNavigateExchange = () => {
  Taro.navigateTo({
    url: `/packageA/pages/detail-and-record/index?type=${2}`,
  });
};

const onNavigateRank = () => {
  Taro.navigateTo({
    url: `/packageA/pages/jifen-rank/index`,
  });
};
</script>

<style lang="less">
.jifen-header-panel {
  width: 100%;
  aspect-ratio: 704 / 376;
  background-image: url("@/assets/jifen/jifen-panel-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  &__top {
    height: 185px;
    padding: 0 42px;
    &-wrapped {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    &-count {
      display: inline-flex;
      flex-direction: column;
      .num {
        font-weight: bold;
        font-size: 84px;
        color: #000000;
      }
      .label {
        font-weight: 400;
        font-size: 28px;
        color: #8b8b8b;
      }
    }
    .corn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 145px;
      height: 163px;
    }
  }

  &__bottom {
    height: 186px;
    padding: 0 24px;
    &-wrapped {
      padding: 35px 25px 0 25px;
      display: flex;
      justify-content: space-between;
      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        &__icon {
          width: 94px;
          height: 90px;
        }
        span {
          font-weight: 400;
          font-size: 24px;
          color: #9d4a0a;
          line-height: 34px;
        }
      }
    }
  }
}
</style>
